import React, { useState, useEffect } from 'react';
import { Layout, Breadcrumb, List,Button,message,Spin } from 'antd';
import Api from '../../../util/apiUrl';
import style from './index.module.css';
const { Content } = Layout;

const ArticleList = (props) => {
  console.log('ArticleList props',props)
  const [dataList, setDataList] = useState([]);
  const [isLoading,setIsLoading] = useState(false)
  useEffect(() => {
    getDataList();
  }, []);

  // 获取文章列表
  const getDataList = () => {
    Api.getArticleList()
      .then((res) => {
        console.log('文章列表', res);
        setDataList(res.data.reverse());
      })
      .catch((err) => {
        console.log('获取列表失败', err);
      });
  };

//   删除文章
const deleteArticle=(id)=>{
    setIsLoading(true)
    Api.deleteArticle(id).then(res=>{
        console.log('删除成功',res)
        setIsLoading(false)
        message.success('删除成功');
        let newDataList = [...dataList]
        newDataList.splice(dataList.findIndex(i=>i.id==id),1)
        setDataList(newDataList)
    }).catch(err=>{
        console.log('删除失败',err)
        setIsLoading(false)
        message.error('删除失败');
    })
}

return (
    <>
    {isLoading ? (
      <div className={style.container}>
        <Spin size="large" className={style.spin} />
      </div>
    ) : null}
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>文章</Breadcrumb.Item>
        <Breadcrumb.Item>文章列表</Breadcrumb.Item>
      </Breadcrumb>
      <Content
        className="site-layout-background"
        style={{
          margin: 0,
          minHeight: 280,
        }}
      >
        {/* <RedactContent isAlert={true} /> */}
        <List
          size="large"
          //   header={<div>Header</div>}
          //   footer={<div>Footer</div>}
          bordered
          dataSource={dataList}
          renderItem={(item) => (
            <List.Item>
              <div className={style.item}>
                <p>{item.title}</p>
                <p>
                  <span>上传时间 : {item.updateTime}</span>
                  <span>修改时间 : {item.alterTime}</span>
                  <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                  <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                  <span>文章类型 : {item.skillTypeId}</span>
                  <span>阅读人数 : {item.people}</span>
                </p>
                <p>{item.synopsis}</p>
                <div>
                  <Button type="primary" onClick={()=>{props.history.push('/admin/alterArticle/'+item.id)}}>修改</Button>&nbsp;&nbsp;
                  <Button type="primary" danger onClick={()=>{deleteArticle(item.id)}}>删除</Button>
                </div>
              </div>
            </List.Item>
          )}
        />
      </Content>
    </>
  );
};

export default ArticleList;
